/**
 * Created by Ysssssss on 2021/4/22.
 */

 import React, { PureComponent } from 'react'
 import {connect} from "react-redux";
 import {withRouter} from "react-router-dom";
 import PageBackHeader from "@common/PageBackHeader";
 import WarehouseOrderDetailStatus from '@components/warehouse/WarehouseOrderDetailStatus'
 import OrderDetailProductTable from "@common/presentational/OrderDetailProductTable";
 import {STORAGE_STATUS} from "@constants/StorageStatus";
 import {
     getWarehouseOrderInfo
 } from '@sagas/warehouse/send'
 import {DELIVER_TYPE} from "@constants/DeliveryType";
import {getHistoryMatchParams} from "@utils/setUrlQuery";
import {priceFenToYuan} from "@utils/priceConversion";
 
 @connect(({ send }) => ({
    warehouseOrderInfo: send.warehouseOrderInfo
 }), {
     getWarehouseOrderInfo
 })
 @withRouter
 class WarehouseOrderDetailPage extends PureComponent {
     constructor(props) {
         super(props);
 
         this.columns = [{
             title: '单价',
             dataIndex: 'price',
             key: 'price',
             render: text => priceFenToYuan(text)
         }, {
             title: '数量',
             dataIndex: 'quantity',
             key: 'quantity',
         }, {
             title: '库存数量',
             dataIndex: 'storage_quantity',
             key: 'storage_quantity',
         }]
     }
 
     componentDidMount () {
         this.getOrderDetail()
     }
 
     getOrderDetail () {
         const { orderNumber, warehouseId } = getHistoryMatchParams(this.props)
         this.props.getWarehouseOrderInfo({ id:warehouseId,orderNumber })
     }
 
     render () {
         const { warehouseOrderInfo, history } = this.props
         const orderDetail = warehouseOrderInfo || null
         return orderDetail && orderDetail.order_number ? (
             <div className="bilin-web">
                 <PageBackHeader title="订单详情" backUrl={history.location.query || "/warehouse/order"}/>
                 <div className="bilin-web-body">
                     <div className="warehouse-order-detail">
                         <WarehouseOrderDetailStatus orderDetail={orderDetail} getOrderDetail={this.getOrderDetail.bind(this)}/>
                         <div className="detail-box flex-row-between flex-vertical-top">
                             <div className="max-w-quarter-2 flex1">
                                 <div className="ft-clr-d ft-16">配货信息</div>
                                 <div className="ft-clr-d mgt-24">
                                     <span>配送方式：</span>
                                     <span className="mgl-4">{ DELIVER_TYPE[orderDetail.deliver_type] }</span>
                                 </div>
                                 <div className="ft-clr-d mgt-16">
                                     <span>配货仓库：</span>
                                     <span className="mgl-4">{ orderDetail.warehouse_name }</span>
                                 </div>
                             </div>
                                 <div className="max-w-quarter-2 flex1">
                                     <div className="ft-clr-d ft-16">收货人信息</div>
                                     <div className="ft-clr-d mgt-24">
                                         <span>下单客户：</span>
                                         <span className="mgl-4">{ orderDetail.contact }</span>
                                     </div>
 
                                     {orderDetail.deliver_type === 0 ? (
                                         <div className="ft-clr-d mgt-16">
                                             <span>预约时间：</span>
                                             <span className="mgl-4">{ orderDetail.deliver_time || '等待取货' }</span>
                                         </div>
                                     ) : (
                                         <div className="ft-clr-d mgt-16">
                                             <span>收货信息：</span>
                                             <span className="mgl-4">{ orderDetail.receiver },{orderDetail.address}</span>
                                         </div>
                                     )}
                                     <div className="ft-clr-d mgt-16">
                                         <span>客户备注：</span>
                                         <span className="mgl-4">{ orderDetail.remark?.memo || '--' }</span>
                                     </div>
                                 </div>
                         </div>
                         <div className="detail-box">
                             <div className="ft-clr-d ft-16">订单信息</div>
                             <div className="mgt-36 mgb-36 flex-row-between flex-vertical-top">
                                 <div>
                                     <span>订单编号：</span>
                                     <span className="mgl-4">{ orderDetail.order_number }</span>
                                 </div>
                             </div>
                             <OrderDetailProductTable
                                 columns={this.columns}
                                 detailList={orderDetail.details || []}
                             />
                             <div className="flex-row-right mgt-24" style={{height: 30}}>
                                 <span className="ft-12 ft-clr-ml mgl-16">配送费：￥{priceFenToYuan(orderDetail.expect_deliver_fee)}</span>
                                 <span className="ft-12 ft-clr-d mgl-16 flex-center">
                                     <span>实付金额：</span>
                                     <span className="ft-18">￥{priceFenToYuan(orderDetail.prod_trans + orderDetail.expect_deliver_fee)}</span>
                                 </span>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
         ) : null
     }
 }
 
 export default WarehouseOrderDetailPage